<template>
    <div class="contentDefault">
        <div class="selectList">
          <button class="searchBtn" type="button" @click="newTab">+&nbsp;&nbsp;派团</button>
          <div class="operate-cont">
            <a class="oper-btn" href="javascript:;" ref="text" @click="editGroup(task)">
              <span class="edit-icon"></span>
              <span>编辑</span>
            </a>
            <a class="oper-btn" href="javascript:;" ref="dele" @click="deleGroup(task)">
              <span class="dele-icon"></span>
              <span>删除</span>
            </a>
          </div>
        </div>
        <div class="datas-box" v-show="listBox">
          <div class="left-cont">
            <table class="table table-bordered table-hover" ref="groupTable" id="groupTable">
              <thead>
              <tr class="active">
                <th>任务编号</th>
                <th>任务名称</th>
                <th>导游姓名</th>
                <th>导游电话</th>
                <th>任务状态</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(val,index) in groupList" @click="getTask(val)">
                <td><span>{{val.taskSn || '未设置'}}</span></td>
                <td><span>{{val.taskName || '未设置'}}</span></td>
                <td><span>{{val.guideName || '未设置'}}</span></td>
                <td><span>{{val.guideMobile || '未设置'}}</span></td>
                <td><span>{{taskStatusList[val.status] || '未设置'}}</span></td>
              </tr>
              </tbody>
            </table>
            <FootPage :Pieces="pieces" :PiecePage="pageNum" :Page="pages" v-on:current-page="currentPage"></FootPage>
          </div>
          <div class="detail-box">
            <div class="detail-head">详细信息</div>
            <div class="detal-content">
              <div>任务编号：{{groupInfos.taskSn || '未设置'}}</div>
              <div>任务名称：{{groupInfos.taskName || '未设置'}}</div>
              <div>
                <p class="inline-p">出团通知书附件：</p>
                <p class="inline-p" v-if="!groupInfos.tuanFiles">未设置</p>
                <div class="no-padbotom" v-else>
                  <p>
                    <a class="file-tags" :href="val.url" target="_blank" v-for="(val, index) in tuanFiles">
                      {{val.name?val.name:'附件'+(index+1)}}
                    </a>
                  </p>
                  <p class="files-p">
                    <img class="file-imgs" v-for="(val, index) in tuanFileImg" :src="val.url" alt="" />
                  </p>
                </div>
              </div>
              <div>
                <p class="inline-p">名单附件：</p>
                <p class="inline-p" v-if="!groupInfos.rosterFiles">未设置</p>
                <div class="no-padbotom" v-else>
                  <p>
                    <a class="file-tags" :href="val.url" target="_blank" v-for="(val, index) in rosterFiles">
                      {{val.name?val.name:'附件'+(index+1)}}
                    </a>
                  </p>
                  <p class="files-p">
                    <img class="file-imgs" v-for="(val, index) in rosterFileImg" :src="val.url" alt="" />
                  </p>
                </div>
              </div>
              <div>导游姓名：{{groupInfos.guideName || '未设置'}}</div>
              <div>开始日期：{{groupInfos.startDate || '未设置'}}</div>
              <div>出发地：{{groupInfos.startCity || '未设置'}}</div>
              <div>目的地：{{groupInfos.destiCity || '未设置'}}</div>
              <div>行程天数：{{groupInfos.coDay || '未设置'}}</div>
              <div>导游电话：{{groupInfos.guideMobile || '未设置'}}</div>
              <div>旅行社名称：{{groupInfos.lxName || '未设置'}}</div>
              <div>派遣时间：{{filterTime(groupInfos.dispatchTime)}}</div>
              <div>接受时间：{{filterTime(groupInfos.acceptTime)}}</div>
              <div>备注：{{groupInfos.demo || '未设置'}}</div>
            </div>
          </div>
        </div>
        <div class="NoData" v-show="NoData">
            对不起，没有数据
        </div>
    </div>
</template>
<script>
    import FootPage from '@/components/public/footpage'
    export default {
        data(){
            return {
                // 数据控制显示模块
                NoData:false, // 没有数据的时候的模块 默认隐藏
                listBox:true, // 数据列表模块 默认显示
                listHttp:'',// 数据接口连接】
                pieces:'',//数据总数
                pageNum:'',//每页数据条数
                pages:'',//当前页码
                SubNav:'派团管理',
                title:'',//标题,
                groupList:'', // 列表数据
                deleteHttp: '',
                task: {},
                groupInfos: {},
                detailHttp: '',
                rosterFileImg: [],
                rosterFiles: [],
                tuanFiles: [],
                tuanFileImg: [],
                taskStatusList:['待接受','已接受','已拒绝']

            }
        },
        props:['subNav'],
        watch:{
            subNav: function(val) { // 二级导航数据
                this.pagination(window.location.href,1)
                this.pages=this.paginations(1);
                this.port(); //获取对应的二级导航数据
            }
        },
        computed:{
          groupListUrl(){
            return this.$store.state.interface.groupList;
          },
          deleGroupUrl(){
            return this.$store.state.interface.deleGroup;
          },
          groupView(){
            return this.$store.state.interface.groupView;
          }

        },
      filters: {
      },
        methods:{
            newTab(){
                this.$store.commit('NEW_GROUP_TAB',{
                    title:'派团',
                    components:'GroupProNew'
                });
            },
            editGroup(task){
              if (task.id) {
                this.$store.commit('NEW_GROUP_TAB',{
                  title:'编辑',
                  components:'GroupProEdit',
                  dataId:task.id,
                });
              } else {
                layer.msg('请选择要编辑的任务！');
              }
            },
            deleGroup(task){
              if (task.id) {
                let formData = new FormData();
                let self = this;
                let deleteUrl = self.deleteHttp;
                formData.append('id', task.id);
                layer.confirm(`确定删除${task.taskName}？`, {
                  btn: ['确定','取消'] //按钮
                }, function(){
                  self.$ajax.post(deleteUrl, formData).then(function(res){
                    let code = res.data.code;
                    if(code === '10000'){
                      layer.msg('删除成功!');
                      self.$nextTick(() => {
                        self.port();
                      });
                    } else{
                      layer.msg('删除失败!');
                    }
                  });
                }, function(){
                  // 取消
                });
              } else {
                layer.msg('请选择要删除的任务！');
              }
            },
            inquire(){//查询
                let self = this;
                if(self.trigger==true){
                    self.trigger=false;
                    self.pagination(window.location.href,1)
                    self.pages=self.paginations(1);

                    self.port(); //获取对应的数据
                    self.triggerTime=setTimeout(function(){
                        self.trigger=true;
                    },1500)
                }
            },

            currentPage: function(msg){
                this.pages = msg;
                if(this.title==''){
                    this.pagination(window.location.href,msg)
                    this.pages=this.paginations(this.pages);
                }
                this.port(); //获取对应页码数据
            },
            // 获取数据函数port()
            port(){
                let self = this;
                layer.load(2);
                let formData = new FormData(); // 基础信息表单数据
                formData.append('pageId', self.pages);
                formData.append('size', self.pageNum);

                self.$ajax.post(self.listHttp, formData).then(function(res){
                    layer.closeAll('loading');
                    let code = res.data.code;
                    let result = res.data.result;
                    if(code === '10000' && result['WbPaituan.list'].amount * 1 > 0){
                        self.NoData = false;
                        self.listBox = true;
                        self.groupList = result['WbPaituan.list'].list
                        self.pieces = result['WbPaituan.list'].amount;
                        self.$nextTick(() => {
                          $('.datas-box').height($(document).height());
                          $('.left-cont').height($(document).height());
                          $('.detail-head').height($('#guiderTable thead').height());
                          self.getDetail(self.groupList[0].id);
                        });
                    } else{
                        // 没有数据或者数据错误
                        self.NoData = true;
                        self.listBox = false;
                        self.pieces = 0;
                        self.codes(code);
                    }

                  self.$nextTick(() => {
                    $('#groupTable tr').each(function () {
                      $(this).on('click', function () {
                        $(this).addClass('click-active');
                        $(this).siblings().removeClass('click-active');
                      })
                    });
                  });
                },function(res){
                    layer.closeAll('loading');
                    layer.msg('服务器错误！')
                    self.pieces=0;
                })
            },
            filterTime (time) {
              if (time) {
                let gtime = time.trim().split(/\s+/)[0];
                return gtime;
              } else {
                return '未设置'
              }
            },
            getTask (val) {
              if (val) {
                this.rosterFileImg = [];
                this.rosterFiles = [];
                this.tuanFileImg = [];
                this.tuanFiles = [];
                this.task = val;
                this.getDetail(val.id);
              } else {
                layer.msg('加载失败！');
              }
            },
            getDetail (id) {
              let self = this;
              self.$ajax.post(self.detailHttp + '&id=' + id).then(function (res) {
                if (res.data.code === '10000') {
                  self.groupInfos = res.data.result.WbPaituan;
                  let image = /.(png|jpg)$/;
                  // 显示图片
                  if (self.groupInfos.rosterFiles) {
                    for (let item of self.groupInfos.rosterFiles) {
                      if (image.test(item.url)) {
                        self.rosterFileImg.push(item);
                      } else {
                        self.rosterFiles.push(item);
                      }
                    }
                  }
                  if (self.groupInfos.tuanFiles) {
                    for (let item of self.groupInfos.tuanFiles) {
                      if (image.test(item.url)) {
                        self.tuanFileImg.push(item);
                      } else {
                        self.tuanFiles.push(item);
                      }
                    }
                  }
                  let dispatchTime = self.groupInfos.dispatchTime;
                  let acceptTime = self.groupInfos.acceptTime;
                  if (dispatchTime) {
                    let gtime = self.groupInfos.dispatchTime.trim().split(/\s+/)[0];
                    self.groupInfos.dispatchTime = gtime;
                  } else {
                    self.groupInfos.dispatchTime = '未设置'
                  }

                  if (acceptTime) {
                    let gtime = self.groupInfos.acceptTime.trim().split(/\s+/)[0];
                    self.groupInfos.acceptTime = gtime;
                  } else {
                    self.groupInfos.acceptfTime = '未设置';
                  }

                } else {
                  layer.msg('加载失败！');
                }
              }, function (res) {
                layer.msg('服务器错误！');
              })
            }
        },
        beforeMount(){
            let self = this;
            let url = self.groupListUrl;
            let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
            self.listHttp = `${url}?sid=${sessionId}`;
            self.detailHttp = `${self.groupView}?sid=${sessionId}`;
            self.deleteHttp = `${self.deleGroupUrl}?sid=${sessionId}`;//删除
            self.pageNum = self.$store.state.pageNum;
            // 页码
            self.pages = self.paginations(this.pages);
            // 调用获取数据函数port()
            self.port();
        },
        components:{
            FootPage
        }

    }
</script>
<style lang="scss" scoped>
    /*表格*/
    .datas-box{
      display:box; /*（伸缩盒最老版本） */
      display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
      display:-webkit-flex; /* Chrome */
      display:-moz-box;     /* Firefox 19 */
      display:-ms-flexbox;
      display:flex;  /*flex容器*/
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      background: #fff;
      border: 1px solid #ddd;
    }

    .table-bordered{
        .link{
            span{
                word-wrap:break-word ;
                word-break:break-all;
            }
        }
    }
    .oper-btn{color: #09ba79;margin-right: 10px;}
    .oper-btn:last-child{margin-right: 0;}
    .selectList{padding: 14px 12px;}
    .operate-cont{float: right;}
    .oper-btn{float: left;margin-top: 8px;margin-right: 18px;}
    .oper-btn:last-child{margin-right: 0;}
    .dele-icon, .edit-icon{
      /*display: inline-block;*/
      float: left;
      width: 15px;
      height: 16px;
      background: url("../../assets/images/delete2.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 4px;
    }
  .edit-icon{
    background: url("../../assets/images/edit_icon.png") no-repeat;
    background-size: 100% 100%;
  }
  tr.click-active{
    background: #f5f5f5;
  }
    .left-cont{
      width: 76%;
      margin: 10px;
    }
    .detail-box{
      width: 24%;
      background: #fff;
      border-left: 1px solid #ddd;
      overflow-y: auto;
    }
    .detal-content{padding: 10px 14px;}
    .detal-content div{padding-bottom: 14px;}
    .table-bordered{
      border-left: none!important;
      border-right: none!important;
    }
    .detail-head{
      background: #09ba79;color: #fff;
      padding: 0 14px;
      line-height: 33px;
      font-size: 14px;
    }
    .file-tags{
      display: inline-block;
      background: #09ba79;
      color: #fff;
      padding: 4px 10px;margin-right: 6px;margin-top: 6px;
    }
  .inline-p{display: inline-block;}
    .file-imgs{
      display: inline-block;
      width: 90px;height: 80px;
      border-radius: 6px;
      margin-bottom: 10px;margin-right: 10px;
      border: 1px solid #eee;
    }
  div.no-padbotom{padding-bottom: 0;}
  .files-p{margin-top: 8px;}

</style>
